<template>
  <div class="modal_example">
    <a-button type="primary" @click="showAddModal">新增用户</a-button>
    <a-button type="primary" @click="showEditModal">编辑用户</a-button>
    <a-button type="primary" @click="showAddDeptModal">新用户-department</a-button>
    <a-button type="primary" @click="showAddEquipmentModal">新增设备</a-button>

    <user-modal
      v-model:open="open"
      :title="modalTitle"
      :form-state="formState"
      @submit="handleSubmit"
    />

    <department-modal
      v-model:open="deptOpen"
      title="新用户信息填写"
      :rowData="rowData"
      @success="handleDeptSubmit"
    />

    <form-modal1
      v-model:open="equipmentOpen"
      title="设备信息填写"
      :rowData="equipmentRowData"
      @success="handleEquipmentSubmit"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useUserForm } from './useUserForm.ts'
import UserModal from './userModal.vue'
import DepartmentModal from './departmentModal.vue'
import FormModal1 from './formModal1.vue'
import { useDepartmentForm } from './useDepartmentForm.ts'

// 使用表单hook
const { formState, resetForm, submitForm } = useUserForm()

// 控制弹窗显示
const open = ref(false)
const deptOpen = ref(false)
const equipmentOpen = ref(false)
const isEdit = ref(false)
const modalTitle = computed(() => (isEdit.value ? '编辑用户' : '新增用户'))
const deptModalTitle = computed(() => (isEdit.value ? '编辑部门' : '新增部门'))

// 显示新增弹窗
const showAddModal = () => {
  console.log('showAddModal')
  isEdit.value = false
  resetForm()
  open.value = true
}

// open新用户
const rowData = ref<any>({})
const showAddDeptModal = () => {
  rowData.value = {
    realName: '张三',
  }
  isEdit.value = false
  deptOpen.value = true
}

// 显示编辑部门弹窗
const showEditDeptModal = () => {
  isEdit.value = true
  deptOpen.value = true
}

// 显示编辑弹窗
const showEditModal = () => {
  isEdit.value = true
  // 模拟编辑数据
  Object.assign(formState, {
    id: '1',
    name: 'admin',
    realName: '张三',
    subordinate: '1',
    role: ['1'],
  })
  open.value = true
}

// 提交表单
const handleSubmit = async () => {
  const success = await submitForm()
  if (success) {
    open.value = false
  }
}

// 处理部门表单提交
const handleDeptSubmit = () => {}

// 设备相关
const equipmentRowData = ref<any>({})

// 显示新增设备弹窗
const showAddEquipmentModal = () => {
  equipmentRowData.value = {}
  equipmentOpen.value = true
}

// 处理设备表单提交
const handleEquipmentSubmit = (equipmentList: any) => {
  console.log('设备表单提交:', equipmentList)
  equipmentOpen.value = false
}
</script>

<style lang="scss">
.modal_example {
  display: flex;
  gap: 10px;
  padding: 20px;
}
</style>
